<template>
  <div>
    <!--主体部分 -->
    <el-main>
      <!-- 航班列表 -->
      <div>
        <el-table :data="pagedList" border style="width: 100%" highlight-current-row
          :header-cell-style="{textAlign: 'center'}">
          <el-table-column prop="area" label="航空公司" class-name="flight-ariline"></el-table-column>
          <el-table-column label="航班细节" min-width="150px">
            <div class="flight-detail">
              <div class="flight-detail">
                <div class="detail-box">
                  <div class="detail-time">12:35</div>
                  <div class='detail-airport'>成田机场</div>
                </div>
                <div class="detail-arrow">
                  <div>
                    <img src="../assets/flight_information.png" width="75px" height="20px">
                  </div>
                  <div style="font-size:10px">
                    总时间 3h
                  </div>
                </div>
                <div class="detail-box">
                  <div class="detail-time">15:50</div>
                  <div class="detail-airport">大兴机场</div>
                </div>
              </div>
            </div>
          </el-table-column>
          <el-table-column prop="day_weather" label="航班状态" class="flight-consume"></el-table-column>
          <el-table-column prop="day_air_temperature" label="价格"></el-table-column>
          <el-table-column label="准点率">
            <template slot-scope="scope">
              <img :src="scope.row.day_weather_pic" width="50" />
            </template>
          </el-table-column>
          <el-table-column label="操作" class="flight-option" min-width="100px">
            <template v-slot:default="slotProps">
              <template v-if="!isAdmin()">
                <div>
                  <el-button @click="deleteOrder(slotProps.row)">退 订</el-button>
                  <el-button @click="select_seat(slotProps.row)">选 座</el-button>
                </div>
                <div>
                  <el-button @click="showDetail(slotProps.row)" style="margin:5px 0">详 情</el-button>
                  <el-button @click="rebookTicket">改 签</el-button>
                </div>
              </template>
              <template v-else>
                <el-button @click="changeFlightState(slotProps.row)">状 态</el-button>
                <el-button @click="changeFlightInfo(slotProps.row)">修 改</el-button>
              </template>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-main>
    <!-- //底部分页栏 -->
    <el-footer class="footer">
      <el-pagination background layout="total,prev,pager,next" v-bind:page-count="totalPage"
        v-bind:total="totalAirplanes" v-bind:page-size="pageSize" @current-change="setCurrentPage"></el-pagination>
    </el-footer>
    <!-- 航班信息弹窗 -->
    <div>
      <!-- 为什么同样的代码 此处需要多加一个style才能保证title不继承el-main的inline-height属性呢 -->
      <el-dialog title="航班详情" :visible.sync="flightDetail.dialogVisible" center style="line-height:100%">
        <span>
          <plane-detail :info="flightDetail.detailInfo"></plane-detail>
        </span>
        <span slot="footer">
          <el-button type="primary" @click="deleteOrder(flightDetail.detailInfo)">退 订</el-button>
          <el-button type="info" @click="hideDetail()">取 消</el-button>
        </span>
      </el-dialog>
    </div>
    <!-- 选座信息弹窗 -->
    <div>
      <el-dialog :visible.sync="CheckSeat.checkSeatVisible" width="50%">
        <check-seat v-on:cancel-check="CheckSeat.checkSeatVisible=false" v-bind:ticketID="this.CheckSeat.ticketID">
        </check-seat>
      </el-dialog>
    </div>
    <!-- 航班状态弹窗 -->
    <div>
      <el-dialog title="航班状态" :visible.sync="flightState.dialogVisible" center>
        <el-date-picker value-format="yyyy-MM-DD" v-model="flightState.flightDate" placeholder="选择日期"></el-date-picker>
        <el-divider></el-divider>
        <div>
          <el-table :data="flightState.ticketState" border>
            <el-table-column label="机票类型" prop="type"></el-table-column>
            <el-table-column label="机票余量" prop="allowance"></el-table-column>
            <el-table-column label="机票价格" v-slot:default="slotProps">
              <el-input v-model="slotProps.row.price"></el-input>
            </el-table-column>
          </el-table>
        </div>
        <div style="display:flex;justify-content:center;margin:20px 0">
          <el-select v-model="flightState.currentState">
            <el-option :label="item" :value="item" :key="index" v-for="(item,index) in flightState.states"></el-option>
          </el-select>
          <el-input style="width:200px;margin:0 10px" v-if="flightState.currentState==='延误'" type="number"
            v-model="flightState.delayTime" placeholder="延误时间">
            <template slot="append">分钟</template>
            </el-input>
        </div>
        <el-divider></el-divider>
        <el-button slot="footer" type="primary">确 认</el-button>
      </el-dialog>
    </div>
  </div>
</template>
<script >
import PlaneDetail from "./PlaneDetail";
import CheckSeat from "./CheckSeat.vue";
export default {
  components: { PlaneDetail, CheckSeat },
  name: "new_list",
  props: ["a"],
  data() {
    return {
      permission: this.a,
      headDate: Number,
      pickedDate: "",
      rawList: [],
      currentPage: 1,
      pageSize: 6,
      flightState: {
        dialogVisible: false,
        states: ["起飞", "延误", "候机", "已落地", "等候"],
        currentState: "",
        delayTime: 0,
        ticketState: [
          {
            type: "经济舱",
            allowance: 100,
            price: 1100
          },
          {
            type: "头等舱",
            allowance: 79,
            price: 2000
          }
        ],
        flightDate: "",
        state: "起飞"
      },
      CheckSeat: {
        checkSeatVisible: false,
        ticketID: ""
      },
      flightDetail: {
        dialogVisible: false,
        detailInfo: null
      }
    };
  },
  methods: {
    getData(filter) {
      // 根据当前过滤器查询数据
      if (filter == "all-ticket") {
        this.$axios
          .post(this.GLOBAL.localHost+"/list",{
            userId:this.GLOBAL.username
          })
          .then(response => (this.rawList = response.data.result.dayList))
          .catch(error => console.log(error));
      } else if (filter == "due-ticket") {
        // 先清空列表
        this.rawList = [];
        this.$axios
          .get("/data.json")
          .then(response => {
            //console.log(response.data.result.dayList);
            for (let item of response.data.result.dayList) {
              //date().getTime获取当前时间
              if (Date.parse(item.daytime) >= new Date().getTime()) {
                //Date.parse(item.daytime)
                this.rawList.push(item);
              }
            }
          })
          .catch(error => console.log(error));
      }
    },
    //退订
    deleteOrder(info) {
      console.log("from delete");
      console.log(info);
      this.$axios
        .post("url", { ticket_id: info.areaid, username: this.GLOBAL.username })
        .then(res => {
          if (res.data.success) alert("退订成功");
          else alert("退订失败");
        });
    },
    //选座
    select_seat(info) {
      console.log("from select");
      console.log(info);
      this.CheckSeat.ticketID = info.areaid;
      this.CheckSeat.checkSeatVisible = true;
    },
    setCurrentPage(currentPage) {
      // 修改当前数据页码
      this.currentPage = currentPage;
    },
    showDetail(info) {
      // 显示航班详情
      this.flightDetail.detailInfo = info;
      this.flightDetail.dialogVisible = true;
    },
    hideDetail() {
      // 隐藏详情页
      this.flightDetail.detailInfo = null;
      this.flightDetail.dialogVisible = false;
    },
    //删除航班
    deleteFlight(info) {
      console.log("from deleteFlight");
      console.log(info);
      this.$axios.post("url", { ticket_id: info.areaid }).then(res => {
        if (res.data.success) alert("删除成功");
        else alert("删除失败");
      });
    },
    //修改航班
    changeFlightState() {
      this.flightState.dialogVisible = !this.flightState.dialogVisible;
    },
    changeFlightInfo(info) {
      this.$emit("edit-flight", info);
    },
    rebookTicket() {
      this.$emit("rebook-ticket", info);
    },
    isAdmin() {
      return this.permission === "admin";
    }
  },
  computed: {
    //分页数据
    pagedList: function() {
      var start = (this.currentPage - 1) * this.pageSize;
      var end = start + this.pageSize;
      return this.rawList.slice(start, end);
    },
    // 总页数
    totalPage: function() {
      return this.rawList.length / this.pageSize;
    },
    // 总航班数
    totalAirplanes: function() {
      return this.rawList.length;
    }
  },
  watch: {
    // 每次标签名修改时获取数据
    'a': function(newVal, oldVal) {
      this.getData(newVal);
    },
    'flightState.flightDate':function(newVal,oldVal){
      console.log(newVal)
    }
  },
  mounted() {
    this.getData(this.a);
  }
};
</script>
<style scoped>
.header {
  font-weight: bolder;
  font-size: x-large;
  background-color: rgb(233, 238, 243);
}
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.flight-detail {
  display: flex;
  justify-content: center;
  align-content: space-around;
  text-align: center;
  color: black;
  padding: 5px;
}
.detail-box {
  padding: 0 5px;
}
.detail-airport {
  margin: 10px 0;
  font-size: small;
}
.detail-time {
  width: 100px;
  font-size: 30px;
}
.detail-arrow {
  font-size: 20px;
}
</style>
